<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>高宽属性</title>
	<style type="text/css">
		/*div{width:600px;background-color: #acacac;}*/
		/*p{background-color: #ececec;width:400px;}
		.one{max-width:300px;}
		.two{min-width:400px;}
		.three{min-width:500px;max-width: 300px;}*/
		/*p{background-color: #ececec;height:50px;float:left;}
		.one{max-height: 300px;}
		.two{min-height: 300px;}
		.three{max-height:200px;min-height: 100px;background-color: #acacac;}*/
		p{background-color: #ececec;height:auto;width:200px;}
		span{ background-color: #acacac;width:200px;height:100px; }
		img{width:200px;height: 100px;}
	</style>
</head>
<body>
  <div>
  	<p>盒子模型高度height宽度width</p>
  	<span>盒子模型高度height宽度width</span>
  <!-- 高宽属性适用块元素和替换元素 -->
     <img src="img/html.jpg" width="200px"/><img src="img/css.jpg" height="100px"/>
  <!-- 高度属性height -->
	<!-- <p>盒子模型高度height:200px;</p>
	<p class="one">盒子模型最大高度max-height:100px;</p>
	<p class="two">盒子模型最小高度min-height:100px;</p>
	<p class="three">盒子模型最大小高度度min-height和max-height;</p> -->
	<!-- <p>盒子模型宽度width:400px;</p>
	<p class="one">盒子模型最大宽度max-width:500px;</p>
	<p class="two">盒子模型最小宽度min-width:500px;</p>
	<p class="three">盒子模型最大小宽度min-width和max-width;</p> -->
  </div>	
</body>
</html>